<template>
  <div class="inputCommonClass">
    <div class="backClass" :style="backStyleClass"></div>
    <input
      autocomplete="off"
      onpaste="return false"
      class="inputClass"
      :type="type"
      :style="inputStyleClass"
      @blur="blurInput"
      @input="changeInput"
      @keydown.down="inputKeyDown"
      @keydown.up="inputKeyUp"
      @keydown.enter="inputKeyEnter"
      v-model="inputValue"
      :placeholder="placeholder"
      :min="min"
      :max="max"
    />
    <div v-if="inputType === 'password'" :class="{'visible': !passwordFlag,'invisible': passwordFlag}"
         @click="eyeClick($event)"/>
  </div>
</template>

<script>
  export default {
    props: {
      name: {
        type: String,
        default: ''
      },
      value: "",
      inputType: {
        type: String,
        validator(val) {
          return ['text', 'password', 'number', 'phone'].indexOf(val) !== -1
        },
        default: 'text'
      },
      placeholder: {
        type: String,
        default: ''
      },
      min: {
        type: Number,
        default: -999
      },
      max: {
        type: Number,
        default: 999
      },
      inputStyle: {
        width: {
          type: String,
          default: '308px'
        },
        height: {
          type: String,
          default: '48px'
        }
      }
    },
    created() {
      let {inputType} = this.$props
      this.type = inputType
    },
    watch: {
      value(val) {
        this.inputValue = val
      }
    },
    data() {
      return {
        inputDefaultWidth: '308px',
        inputDefaultHeight: '48px',
        inputValue: '',
        passwordFlag: true,
        type: 'text',
      }
    },
    computed: {
      backStyleClass() {
        let {inputStyle} = this.$props
        return inputStyle
      },
      inputStyleClass() {
        let {inputStyle} = this.$props
        let style
        if (inputStyle === undefined) {
          style = {}
        } else {
          style = JSON.parse(JSON.stringify(inputStyle))
        }
        if (!style.hasOwnProperty('height')) {
          style['height'] = this.inputDefaultHeight.split('px')[0] + 'px'
        } else {
          style['height'] = style['height'].split('px')[0] + 'px'
        }
        if (!style.hasOwnProperty('width')) {
          style['width'] = this.inputDefaultWidth.split('px')[0] - 30 + 'px'
        } else {
          style['width'] = style['width'].split('px')[0] - 30 + 'px'
        }
        return style
      },

    },
    methods: {
      blurInput(e) {
        let inputVal = e.target.value.replace(/\s*/g, '')
        this.$emit('blurInput', this.name, inputVal)
      },
      changeInput(e) {
        if (this.inputType === 'phone') {
          let inputVal = this.inputValue.replace(/\s*/g, '')
          if (inputVal.length > 11) {
            inputVal = inputVal.replace(/[^\d]/g, '')
            this.inputValue = inputVal.substring(0, 11);
          } else {
            inputVal = inputVal.replace(/[^\d]/g, '')
            this.inputValue = inputVal
            this.$emit('inputChange', this.name, this.inputValue)
          }
        } else {
          let inputVal = this.inputValue.replace(/\s*/g, '')
          this.$emit('inputChange', this.name, inputVal)
        }
      },
      inputKeyDown(e) {
        this.$emit('inputKeyDown')
      },
      inputKeyUp(e) {
        this.$emit('inputKeyUp')
      },
      inputKeyEnter() {
        this.$emit('inputKeyEnter')
      },
      eyeClick() {
        this.passwordFlag = !this.passwordFlag
        this.type = this.passwordFlag ? 'password' : 'text';
      }
    }
  }
</script>

<style lang="less" scoped>
  .inputCommonClass {
    display: inline-block;
  }

  .backClass {
    width: 308px;
    height: 48px;
    position: absolute;
    z-index: -1;
    background: rgba(67, 67, 67, 1);
    opacity: 0.45;
  }

  .inputClass {
    background: none;
    z-index: 2;
    color: rgba(220, 220, 220, 1);
    width: 308px;
    height: 48px;
    padding: 0 15px;
    font-size: 20px;
  }

  .inputClass::-webkit-input-placeholder {
    text-align: center;
    text-align: center;
    font-size: 17px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(220, 220, 220, 1);
  }

  .inputClass:-moz-placeholder {
    text-align: center;
    font-size: 17px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(220, 220, 220, 1);
  }

  .inputClass:-ms-input-placeholder {
    text-align: center;
    font-size: 17px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(220, 220, 220, 1);
  }

  .visible {
    z-index: 2;
    background: url(../../assets/images/eye-open.png) no-repeat 0 0;
    background-size: 100% 100%;
    position: absolute;
    display: block;
    height: 34px;
    width: 34px;
    cursor: pointer;
    pointer-events: auto;
    right: 36px;
    margin-top: -40px;
  }

  .invisible {
    z-index: 3;
    background: url(../../assets/images/eye-close.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    display: block;
    height: 34px;
    width: 34px;
    cursor: pointer;
    pointer-events: auto;
    right: 36px;
    margin-top: -40px;
  }
</style>
